<template>
    <div class="side-menu">
        <el-menu class="el-menu-vertical-demo" :collapse="isCollapse" :default-active="$route.path.split('/')[2]"
            background-color="transparent">
            <el-menu-item v-for="item in sideMenuList" :index="item.path" :key="item.path"
                @click="handleMenuClick($event, item.name as string)">
                <el-icon size='20'>
                    <Location />
                </el-icon>
                <template #title>
                    <div class="menu-item">
                        {{ item.meta?.name }}
                    </div>
                </template>
            </el-menu-item>
        </el-menu>
        <div class="menu-collapse" @click="isCollapse = !isCollapse">
            <el-icon v-if="isCollapse">
                <Expand />
            </el-icon>
            <el-icon v-else>
                <Fold />
            </el-icon>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useMenuStoreHook } from "@/store/module/menu"
import { Expand, Fold, Location } from "@element-plus/icons-vue";
import { MenuItemRegistered } from "element-plus";
import { ref, watch } from "vue";
import { RouteRecordRaw, useRoute, useRouter } from "vue-router";

/**
 * @description 获取右侧菜单列表
 */
const isCollapse = ref(false)
const route = useRoute()
const sideMenuList = ref<RouteRecordRaw[]>([])
watch(
    () => useMenuStoreHook().getSideList,
    (curr) => {
        sideMenuList.value = curr
        isCollapse.value = sideMenuList.value.find(v => v.path == route.meta.parent)?.children ? true : false
    },
    {
        deep: true,
        immediate: true
    }
);
const router = useRouter()
const handleMenuClick = (info: MenuItemRegistered, name: string) => {
    useMenuStoreHook().setChildMenuList(info.index);
    isCollapse.value = sideMenuList.value.find(v => v.path == info.index)?.children ? true : false
    router.push({ name })
}
</script>

<style lang="scss" scoped>
.side-menu {
    width: 100%;
    height: 100%;
    position: relative;

    .menu-collapse {
        position: absolute;
        right: 0;
        bottom: 0;
        transform: translateY(-50%);
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
            cursor: pointer;
            color: $primary-color;
            transition: .3s;
        }
    }
}

.el-menu {
    border: none;
    height: 100%;

    .is-active {
        display: flex;
        align-items: center;
        font-weight: bold;
    }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
}
</style>